<!doctype html>
<html lang="zh-Hans">
<head>
    @import "mate.html"
    <title>科技管家</title>
    <link rel="stylesheet" href="../css/style.min.css">
</head>
<body>
<div class="nav">
    <div class="my-container">
        <div class="nav-box">
            <div class="nav-logo fl">
                <a href="/"><img src="../images/logo.png" alt="" width="296" height="23"></a>
            </div>
            <div class="nav-nav fr">
                <ul class="cf">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="company.html">企业汇</a></li>
                    <li><a href="about.html">关于平台</a></li>
                    <li><a href="../index.html">管家登录</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="index-banner">
    <div class="my-container">
        <div class="index-banner-text">
            <p class="text-big">
                互联网+<br>
                企业科技管理服务云平台
            </p>
            <p class="text-small">Science And Technology Service Platform</p>
        </div>
        <a href="../index.html" class="index-login-btn">立即登录</a>
    </div>
</div>

<div class="index-2">
    <div class="my-container">
        <div class="index-2-text">
            <p>六大核心优势</p>
            <i></i>
        </div>
        <div class="index-2-list">
            <ul class="cf">
                <li><div><i class="icon1"></i></div><p>免费</p></li>
                <li><div><i class="icon2"></i></div><p>一站式服务</p></li>
                <li><div><i class="icon3"></i></div><p>个性化定制</p></li>
                <li><div><i class="icon4"></i></div><p>简单易用</p></li>
                <li><div><i class="icon5"></i></div><p>数据安全</p></li>
                <li><div><i class="icon6"></i></div><p>多人同时办公</p></li>
            </ul>
        </div>
    </div>
</div>

<div class="index-3">
    <div class="my-container">
        <div class="window">
            <ul class="web-list">
                <li><img src="../images/webone.jpg" alt=""></li>
                <li><img src="../images/webtwo.jpg" alt=""></li>
                <li><img src="../images/webthr.jpg" alt=""></li>
                <li><img src="../images/webfour.jpg" alt=""></li>
                <li><img src="../images/webfive.jpg" alt=""></li>
                <li><img src="../images/websix.jpg" alt=""></li>
                <li><img src="../images/websev.jpg" alt=""></li>
            </ul>
        </div>
        <div class="icon-list">
            <i class="prev"></i>
            <i class="next"></i>
            <div class="icon-box">
                <ul>
                    <li class="on">
                        <div class="btn-img"><i class="btn-one"></i></div>
                        <span>知识产权</span>
                    </li>
                    <li>
                        <div class="btn-img"><i class="btn-two"></i></div>
                        <span>研发管理</span>
                    </li>
                    <li>
                        <div class="btn-img"><i class="btn-thr"></i></div>
                        <span>企业信息</span>
                    </li>
                    <li>
                        <div class="btn-img"><i class="btn-four"></i></div>
                        <span>政策库</span>
                    </li>
                    <li>
                        <div class="btn-img"><i class="btn-five"></i></div>
                        <span>科技服务</span>
                    </li>
                    <li>
                        <div class="btn-img"><i class="btn-six"></i></div>
                        <span>大数据平台</span>
                    </li>
                    <li>
                        <div class="btn-img"><i class="btn-seven"></i></div>
                        <span>服务项目</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="index-footer">
    <h6>宁波生产力促进中心</h6>
    <p>
        <span>地址：宁波市高新区研发园B区3号楼210室</span>
        <span>电话：0574-27960359</span>
        <span>邮箱：npbc_kjgj@163.com</span>
        <span>邮编：315040</span>
    </p>
</div>
<script src="../assets/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
      (function () {
        $('i.next').click(function () {
          $('.icon-box>ul').addClass('move');
          $(this).css({
            'opacity': 0.3,
            'filter': 'alpha(opacity=30)'
          });
          $('i.prev').css({
            'opacity': 1,
            'filter': 'alpha(opacity=100)'
          });
        });
        $('i.prev').click(function () {
          $('.icon-box>ul').removeClass('move');
          $(this).css({
            'opacity': 0.3,
            'filter': 'alpha(opacity=30)'
          });
          $('i.next').css({
            'opacity': 1,
            'filter': 'alpha(opacity=100)'
          });
        });
        var prevind = 0;
        var isMove = true;
        var webLi = $('.web-list>li');
        var move = webLi.outerWidth();
        webLi.eq(prevind).css('left', 0);
        $('.icon-box li').click(function () {
          var ind = $(this).index();
          if (ind !== prevind && isMove) {
            $(this).addClass('on').siblings().removeClass('on');
            isMove = false;
            webLi.eq(ind).animate({left: 0}, 300);
            webLi.eq(prevind).animate({left: -move}, 300);
            setTimeout(function () {
              webLi.eq(prevind).css('left', move);
              prevind = ind;
              isMove = true;
            }, 600);
          }
        });
      })();
    });
</script>
</body>
</html>